import React, { useState } from 'react'
import './fourteen.css'
import f from '../../public/img/f.png'
import g from '../../public/img/g.png'
import h from '../../public/img/h.png'
import i from '../../public/img/i.png'
import j from '../../public/img/j.png'
import j1 from '../../public/img/j1.png'
import j2 from '../../public/img/j2.png'
import j3 from '../../public/img/j3.png'
import j4 from '../../public/img/j4.png'
import j5 from '../../public/img/j5.png'
import j6 from '../../public/img/j6.png'
import k from '../../public/img/k.png'
import k1 from '../../public/img/k1.png'
import k2 from '../../public/img/k2.png'
import k3 from '../../public/img/k3.png'
import k4 from '../../public/img/k4.png'
import k5 from '../../public/img/k5.png'
import { Input, QRCode, Space } from 'antd';

function Fourteen() {
  const [activeTab, setActiveTab] = useState('素材采购')
  const [activeLogo, setActiveLogo] = useState('人民日报')
  const [text, setText] = React.useState('');
  const handleTabClick = (tabName: string) => {
    setActiveTab(tabName)
  }

  const handleLogoClick = (logoName: string) => {
    setActiveLogo(logoName)
  }

  const renderContent = () => {
    switch (activeTab) {
      case '素材采购':
        return (
          <div className="main-content">
            <div className="service-notice">
              如果您需要:采购企业VIP或单个购买作品、API对接
            </div>
            
            <div className="qr-code-section">
              <div className="qr-code-box">
                <div className="qr-title">微信扫一扫</div>
                <div className="qr-subtitle">客户经理为您服务</div>
                <div className="qr-code">
                  <div className="qr-code-image">
                    <div className="qr-icon">
                   <Space direction="vertical" align="center">
                    <QRCode value={text || '-'} />
     
    </Space>
                    </div>
                  </div>
                </div>
                <div className="qr-note">(无需验证 扫码直接聊)</div>
              </div>
            </div>
          </div>
        )
      
      case '素材定制':
        return (
          <div className="main-content">
            <div className="service-notice">
              创意·设计·制作
            </div>
            
            <div className="custom-section">
              <div className="custom-card promotional">
                                <div className="card-content">
                  <img src={f} alt="宣传片制作" style={{width: '100%', height: '100%'}}/>
                </div>
                <div className="card-description">
                  <div className="description-title">宣传片制作</div>
                  <div className="description-content">
                    企业宣传/品牌宣传/项目宣传/城市宣传/文旅宣传/工作成果宣传/产品宣传/节日宣传/公益宣传/科普宣传/招商宣传等
                  </div>
                </div>
              </div>
              
              <div className="custom-card film">
                <div className="card-content">
                <img src={g} alt="宣传片制作" style={{width: '100%', height: '100%'}}/>
                </div>
                <div className="card-description">
                  <div className="description-title">影视包装</div>
                  <div className="description-content">
                    广告包装/节目包装/新闻报道/短视频包装/影视剧包装/影视营销物料包装/影视片头制作等
                  </div>
                </div>
              </div>
              
              <div className="custom-card conference">
                <div className="card-content">
                <img src={h} alt="宣传片制作" style={{width: '100%', height: '100%'}}/>
                </div>
                <div className="card-description">
                  <div className="description-title">会议活动包装</div>
                  <div className="description-content">
                    会议活动开场/会议活动倒计时/会议活动启动仪式/主题会议活动背景/会议内容解读/会议内容宣传等
                  </div>
                </div>
              </div>
            </div>
          </div>
        )
      
      case '代理合作':
        return (
          <div className="main-content">
           
            
            <div className="agent-section">
              <div className="agent-visual">
                <div className="agent-card">
                  <div className="agent-image">
                    <img src={i} alt="代理合作" />
                  </div>
                </div>
              </div>
              
              <div className="agent-text">
                <div className="agent-description">
                  包图网-国内领先的优质创意内容供给平台,汇集亿级精品素材、拥有顶尖在线编辑技术,具备完善的版权备案、授权体系。
                </div>
                
                <div className="agent-separator"></div>
                
                <div className="agent-highlight">
                  现开放模板素材、在线编辑技术对外代理合作
                </div>
                
                <div className="agent-contact">
                  如有需求请联系邮箱:
                  <div className="contact-emails">
                    <div className="email">info@ibaotu.com</div>
                    <div className="email">ruby.xiong@ibaotu.com</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )
      
      case '企业客户':
        return (
          <div className="main-content">
            <div className="service-notice">
              加入包图企业VIP 与知名品牌为伍
            </div>
            
            <div className="enterprise-section">
              <div className="brand-logos">
                <div className="brand-logos-container">
                  {/* 第一组卡片 */}
                  <div className="brand-card">
                    <img src={j} alt="" style={{width: '100%', height: '100%'}}/>
                  </div>
                  
                  <div className="brand-card">
                    <img src={j1} alt="" style={{width: '100%', height: '100%'}}/>
                  </div>
                  
                  <div className="brand-card">
                    <img src={j2} alt="" style={{width: '100%', height: '100%'}}/>
                  </div>
                  
                  <div className="brand-card">
                    <img src={j3} alt="" style={{width: '100%', height: '100%'}}/>
                  </div>
                  
                  <div className="brand-card">
                    <img src={j4} alt="" style={{width: '100%', height: '100%'}}/>
                  </div>
                  
                  <div className="brand-card">
                    <img src={j5} alt="" style={{width: '100%', height: '100%'}}/>
                  </div>
                  
                  <div className="brand-card">
                    <img src={j6} alt="" style={{width: '100%', height: '100%'}}/>
                  </div>
                  
                  {/* 第二组卡片 - 无缝衔接 */}
                  <div className="brand-card">
                    <img src={j} alt="" style={{width: '100%', height: '100%'}}/>
                  </div>
                  
                  <div className="brand-card">
                    <img src={j1} alt="" style={{width: '100%', height: '100%'}}/>
                  </div>
                  
                  <div className="brand-card">
                    <img src={j2} alt="" style={{width: '100%', height: '100%'}}/>
                  </div>
                  
                  <div className="brand-card">
                    <img src={j3} alt="" style={{width: '100%', height: '100%'}}/>
                  </div>
                  
                  <div className="brand-card">
                    <img src={j4} alt="" style={{width: '100%', height: '100%'}}/>
                  </div>
                  
                  <div className="brand-card">
                    <img src={j5} alt="" style={{width: '100%', height: '100%'}}/>
                  </div>
                  
                  <div className="brand-card">
                    <img src={j6} alt="" style={{width: '100%', height: '100%'}}/>
                  </div>
                  
                  {/* 第三组卡片 - 确保完全无缝 */}
                  <div className="brand-card">
                    <img src={j} alt="" style={{width: '100%', height: '100%'}}/>
                  </div>
                  
                  <div className="brand-card">
                    <img src={j1} alt="" style={{width: '100%', height: '100%'}}/>
                  </div>
                  
                  <div className="brand-card">
                    <img src={j2} alt="" style={{width: '100%', height: '100%'}}/>
                  </div>
                  
                  <div className="brand-card">
                    <img src={j3} alt="" style={{width: '100%', height: '100%'}}/>
                  </div>
                  
                  <div className="brand-card">
                    <img src={j4} alt="" style={{width: '100%', height: '100%'}}/>
                  </div>
                  
                  <div className="brand-card">
                    <img src={j5} alt="" style={{width: '100%', height: '100%'}}/>
                  </div>
                  
                  <div className="brand-card">
                    <img src={j6} alt="" style={{width: '100%', height: '100%'}}/>
                  </div>
                </div>
              </div>
              
              <div className="enterprise-buttons">
                <button className="enterprise-btn-primary" >获取版权保障</button>
                <button className="enterprise-btn-secondary">查看更多</button>
              </div>
            </div>
          </div>
        )
      
      case '版权保障':
        return (
          <div className="main-content">
            <div className="copyright-header">
              <div className="copyright-main-title">在各行各业为版权护航</div>
              <div className="copyright-subtitle">从业界巨头到初创团队,超过6万个优秀企业都在使用</div>
              <div className="partner-logos">
                <div className="partner-logo people-daily">
                  <div className={`logo-circle ${activeLogo === '人民日报' ? 'active' : ''}`} onClick={() => handleLogoClick('人民日报')}>
                    <div className="logo-text">人民日报</div>
                    <div className="logo-english">PEOPLE'S DAILY</div>
                  </div>
                </div>
                <div className="partner-logo baotu">
                  <div className={`logo-circle ${activeLogo === '包图网' ? 'active' : ''}`} onClick={() => handleLogoClick('包图网')}>
                    <div className="logo-text">包图网</div>
                  </div>
                </div>
                <div className="partner-logo cctv">
                  <div className={`logo-circle ${activeLogo === '央视新闻' ? 'active' : ''}`} onClick={() => handleLogoClick('央视新闻')}>
                    <div className="logo-text">央视新闻</div>
                  </div>
                </div>
                <div className="partner-logo pingan">
                  <div className={`logo-circle ${activeLogo === '中国平安' ? 'active' : ''}`} onClick={() => handleLogoClick('中国平安')}>
                    <div className="logo-text">中国平安</div>
                    <div className="logo-english">PING AN</div>
                  </div>
                </div>
                <div className="partner-logo meituan">
                  <div className={`logo-circle ${activeLogo === '美团' ? 'active' : ''}`} onClick={() => handleLogoClick('美团')}>
                    <div className="logo-symbol">M</div>
                  </div>
                </div>
                <div className="partner-logo sina">
                  <div className={`logo-circle ${activeLogo === '新浪' ? 'active' : ''}`} onClick={() => handleLogoClick('新浪')}>
                    <div className="logo-text">sina</div>
                  </div>
                </div>
              </div>
              
              <div className="logo-content">
                <div className={`content-section ${activeLogo === '人民日报' ? 'active' : ''}`}>
                  <img src={k} alt="" />
                </div>
                
                <div className={`content-section ${activeLogo === '包图网' ? 'active' : ''}`}>
                  <img src={k1} alt="" />
                </div>
                
                <div className={`content-section ${activeLogo === '央视新闻' ? 'active' : ''}`}>
                  <img src={k2} alt="" />
                </div>
                
                <div className={`content-section ${activeLogo === '中国平安' ? 'active' : ''}`}>
                  <img src={k3} alt="" />
                </div>
                
                <div className={`content-section ${activeLogo === '美团' ? 'active' : ''}`}>
                  <img src={k4} alt="" />
                </div>
                
                <div className={`content-section ${activeLogo === '新浪' ? 'active' : ''}`}>
                  <img src={k5} alt="" />
                </div>
              </div>
            </div>
         
          </div>
        )
      
      default:
        return null
    }
  }

  return (
    <div className="fourteen-container">
      {/* 导航栏 */}
      <nav className="navigation-bar">
        <div 
          className={`nav-item ${activeTab === '素材采购' ? 'active' : ''}`}
          onClick={() => handleTabClick('素材采购')}
        >
          素材采购
        </div>
        <div 
          className={`nav-item ${activeTab === '素材定制' ? 'active' : ''}`}
          onClick={() => handleTabClick('素材定制')}
        >
          素材定制
          <span className="new-tag">NEW</span>
        </div>
        <div 
          className={`nav-item ${activeTab === '代理合作' ? 'active' : ''}`}
          onClick={() => handleTabClick('代理合作')}
        >
          代理合作
        </div>
        <div 
          className={`nav-item ${activeTab === '企业客户' ? 'active' : ''}`}
          onClick={() => handleTabClick('企业客户')}
        >
          企业客户
        </div>
        <div 
          className={`nav-item ${activeTab === '版权保障' ? 'active' : ''}`}
          onClick={() => handleTabClick('版权保障')}
        >
          版权保障
        </div>
      </nav>

      {/* 动态内容区域 */}
      {renderContent()}

      {/* 底部联系信息 */}
      <div className="footer-section">
        <div className="footer-left">
          <div className="recommend-dropdown">
            为您推荐
            <span className="dropdown-arrow">▼</span>
          </div>
        </div>
        
        <div className="footer-center">
          <div className="contact-info">
            <div className="contact-item">有任何疑问联系客服QQ: 3005589603</div>
            <div className="contact-item">申请友情链接联系QQ: 1060327122</div>
            <div className="contact-item">商务合作请联系QQ: 447632005</div>
          </div>
        </div>
        
        <div className="footer-right">
          <button className="enterprise-btn">企业套餐优惠采购</button>
          <div className="social-icons">
            <div className="social-icon wechat">💬</div>
            <div className="social-icon weibo">📱</div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Fourteen
